<template>
  <div class="listcontainer">
    <ul class="catlist">
      <!-- <span style="color:red">{{ showShopCatList }}</span> -->

      <li v-for="item in showShopCatList" v-bind:key="item.goods_id">
        <router-link
          :to="{
            name: 'shopInCat',
            query: { goods_id: item.goods_id },
          }"
        >
          <img v-bind:src="item.goods_thumb" alt="" />
          <div>
            <h4>{{ item.goods_name }}</h4>
            <span class="span">
              ¥<span class="sp">{{ item.shop_price }}</span>
            </span>
          </div>
        </router-link>
        <router-view></router-view>
      </li>
    </ul>
    <!-- <P>{{ showData }}</P> -->
  </div>
</template>
<script>
export default {
  data() {
    return { cityData: '' }
  },
  mounted() {
    this.goCat()
  },
  computed: {
    showShopCatList() {
      return this.$store.state.shopping.ShopCatList
    },
  },
  methods: {
    goCat() {
      this.$store.dispatch({
        type: 'getShopCatList',
      })
    },
  },
}
</script>
<style lang="less" scoped>
.listcontainer {
  color: #fff;
  display: flex;
  align-content: center;
  justify-content: center;
  .catlist {
    padding: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49%;
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
      }
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.4rem;
        h4 {
          margin: 0;
          padding: 0;
          font-size: 12px;
          height: 3.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          font-family: inherit;
          font-weight: 500;
          color: #000;
        }
        .span {
          color: red;
          .sp {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
